<template>
	<view class="empty_box" v-if="show">
		<view class="empty" :style="{marginTop: marginTop + 'rpx', marginBottom :marginBottom + 'rpx'}">
			<image :src="icons[mode].icon"></image>
			<view class="text">
				{{text ? text : icons[mode]['text']}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "empty",
		props: {
			// 是否显示
			show: {
				type: Boolean,
				default: true
			},
			// 组件距离上一个元素之间的距离
			marginTop: {
				type: [String, Number],
				default: 100
			},
			// 组件距离下一个元素之间的距离
			marginBottom: {
				type: [String, Number],
				default: 100
			},
			// 显示哪个图标
			mode: {
				type: String,
				default: 'data'
			},
			// 显示文字
			text: {
				type: String,
			}
		},
		data() {
			return {
				icons: {
					car: {
						text: '购物车为空',
						icon: require('@/static/emptyImgs/car.png')
					},
					search: {
						text: '没有搜索结果',
						icon: require('@/static/emptyImgs/search.png')
					},
					address: {
						text: '没有收货地址',
						icon: require('@/static/emptyImgs/address.png')
					},
					order: {
						text: '暂无订单',
						icon: require('@/static/emptyImgs/order.png')
					},
					history: {
						text: '暂无浏览记录',
						icon: require('@/static/emptyImgs/history.png')
					},
					message: {
						text: '消息列表为空',
						icon: require('@/static/emptyImgs/message.png')
					},
					data: {
						text: '暂无数据',
						icon: require('@/static/emptyImgs/list.png')
					}
				}
			};
		}
	}
</script>

<style lang="scss" scoped>
	.empty_box {
		width: 100%;
		display: flex;
		justify-content: center;
	}

	image {
		width: 160px;
		height: 160px;
	}

	.empty {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}

	.text {
		text-align: center;
		color: #c0c4cc;
	}
</style>